/* eslint-disable react/prop-types */
import { Button, Flex, Form } from "antd"
import { useCallback, useEffect } from "react"

import { querySaveRiskControlNote } from "@/api/member"
import { IMemberSaveRiskControlNoteParams, IModalContent } from "@/api/member/types"
import { Toast } from "@/components/messages"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"

import { StyleContainter } from "../styles"
import { CustomTextArea } from "./CustomTextArea"

export const RiskControlNoteModal: React.FC<IModalContent> = ({ handleCancel, filterInfo, userInfo }) => {
	const { formatMessage, newFormat } = useLocale()
	const { loading } = useApi()
	const [form] = Form.useForm()

	const submit = useCallback(
		async (value: IMemberSaveRiskControlNoteParams) => {
			value.note = value.note.trim()
			if (value.note === "") {
				Toast.error(newFormat("message.risk_control_note_err"))
				return
			}
			const body = {
				note: value.note,
				userId: filterInfo.userId,
				userName: filterInfo.username
			}
			const [err] = await querySaveRiskControlNote({ ...body })
			if (err) {
				Toast.error(err.msg)
			}
			handleCancel()
			form.resetFields()
		},
		[filterInfo]
	)

	useEffect(() => {}, [userInfo])

	return (
		<StyleContainter>
			<Flex align="center" gap={10}>
				<Form style={{ width: "100%" }} form={form} onFinish={submit}>
					<CustomTextArea
						placeholder={formatMessage({ id: "member.edit_user.account_status.please_enter" })}
						value={filterInfo.riskControlNote ? filterInfo.riskControlNote[0]?.note : ""}
						name="note"
						label={formatMessage({ id: "member.edit_user.account_status.submit_notes" }) + ":"}
					/>
					<Flex justify="center" wrap="wrap" gap={10}>
						<Button
							key="back"
							onClick={() => {
								handleCancel()
								form.resetFields()
							}}
						>
							{formatMessage({ id: "member.table_info.cancel" })}
						</Button>
						<Button htmlType="submit" type="primary" loading={loading}>
							{formatMessage({ id: "common.sure" })}
						</Button>
					</Flex>
				</Form>
			</Flex>
		</StyleContainter>
	)
}
